<script setup lang="ts">
import { defineProps, ref, watch } from 'vue';
import { useBooleanStore } from '@/store';
import { Notification } from '@arco-design/web-vue';
import { cancelCarTask } from '@/api/les';
import { LocationTypeOption } from '@/api/les/types';
import { getName } from '@/utils/auth';

const props = defineProps<{
  tableData: any;
  typeOptions: LocationTypeOption[];
}>();

const statusOptions = [
  {
    label: '执行中',
    value: 0,
  },
  {
    label: '执行成功',
    value: 1,
  },
  {
    label: '执行失败',
    value: 2,
  },
  {
    label: '已撤销',
    value: 3,
  },
  {
    label: '已发车',
    value: 4,
  },
];

// AO数据头
const aoColumns: any[] = [
  {
    title: '序号',
    dataIndex: 'index',
    slotName: 'index',
    align: 'center',
  },
  {
    title: '任务编号',
    dataIndex: 'code',
  },
  {
    title: '任务类型',
    slotName: 'type',
    dataIndex: 'type',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  {
    title: '任务状态',
    slotName: 'status',
    dataIndex: 'status',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  {
    title: '起始位置',
    dataIndex: 'startLocation',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  {
    title: '结束位置',
    dataIndex: 'endLocation',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  {
    title: '报文',
    dataIndex: 'message',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
    width: '120',
  },
  {
    title: '备注',
    dataIndex: 'remarks',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
    width: '140',
  },
  {
    title: '执行时间',
    dataIndex: 'executionDate',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
  },
  {
    title: '操作',
    dataIndex: 'action',
    slotName: 'action',
    fixed: 'right',
    align: 'center',
  },
];

const booleanStore = useBooleanStore();
// 创建一个响应式的本地副本
const localTableData = ref<any[]>([]);
// 数据库一共有多少条
const total = ref<number>(0);
const pageNum = ref<number>(1);
const pageSize = ref<number>(10);

// 监听props.tableData的变化，并更新本地副本
watch(
  () => props.tableData,
  () => {
    localTableData.value = props.tableData?.responseBody?.records || [];
    // localTableData.value = [];
    total.value = props.tableData?.responseBody?.total || 0;
    // total.value = 0;
  },
  { immediate: true }
);

function change(e: any) {
  pageNum.value = e;
}
function changeSize(e: any) {
  pageSize.value = e;
}

// 撤销
async function onDel(record: any) {
  const data = await cancelCarTask({
    carTaskCode: record.code,
    current: getName() as string,
  });
  if (data.retCode === '200') {
    // booleanStore.setPage(pageNum.value, pageSize.value, 70);
    localTableData.value = localTableData.value.map((i: any) => {
      if (i.id === record.id) {
        return { ...i, status: 3 }; // 返回新对象
      }
      return i;
    });
    Notification.success({
      title: '成功',
      content: data.message,
      closable: true,
    });
  } else {
    Notification.error({
      title: '失败',
      content: data.message,
      closable: true,
    });
  }
}

// 监听页面变化
watch([pageNum, pageSize], () => {
  booleanStore.setPage(pageNum.value, pageSize.value, 70);
});
</script>

<template>
  <div>
    <a-table
      :stripe="true"
      class="top-table"
      :pagination="false"
      :columns="aoColumns"
      :data="localTableData"
    >
      <template #index="{ record }">{{
        localTableData.indexOf(record) + 1
      }}</template>
      <template #type="{ record }">{{
        props.typeOptions.find((item) => item.value === record.type)?.label
      }}</template>
      <template #status="{ record }">{{
        statusOptions.find((item) => item.value === record.status)?.label
      }}</template>
      <template #action="{ record }">
        <a-popconfirm
          v-if="record.status === 0"
          content="是否确认撤销这条任务?"
          ok-text="确认"
          cancel-text="取消"
          @ok="onDel(record)"
        >
          <a-button v-if="record.status === 0" type="text" class="font-color"
            >撤销</a-button
          >
        </a-popconfirm>
      </template>
    </a-table>
    <div class="page-position">
      <a-pagination
        :total="total"
        :current="pageNum"
        :page-size="pageSize"
        show-total
        show-jumper
        show-page-size
        @change="change"
        @update:pageSize="changeSize"
      />
    </div>
  </div>
</template>

<style scoped>
.top-table {
  white-space: nowrap;
}
.page-position {
  margin-top: 20px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
